<template>
  <div class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template #title>
            <div style="font-size: 15px;font-weight: 400;color: #333;"><span>条件查询</span></div>
        </template>
        <template #icon="{ isActive }">
          <div class="icon-ele">{{ isActive ? '展开' : '折叠' }}</div>
        </template>
        <div class="top-main">
          <el-row>
            <el-col :span="22">
              <el-form :model="param" :inline="true" label-width="100px">
                <el-form-item label="箱号">
                  <MultipleBoxNumbersDialog v-model.trim="param.containerNo" clearable/>
                </el-form-item>
                <el-form-item label="箱型">
                  <el-select v-model="param.boxType" clearable style="width:100%" placeholder="选择箱型">
                    <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="箱况">
                  <el-select v-model="param.boxCondition" clearable style="width:100%" placeholder="选择箱况">
                    <el-option v-for="item in param.boxCaseOptions" :key="item.value" :label="item.label" :value="item.value"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="提箱单号">
                  <el-input v-model.trim="param.packingNo" clearable placeholder="请输入提箱单号"></el-input>
                </el-form-item>
                <el-form-item label="提箱日期">
                  <el-date-picker v-model="param.packingDate" type="daterange" range-separator="~" start-placeholder="开始日期"
                                  end-placeholder="结束日期"/>
                </el-form-item>
                <el-form-item label="客户">
                  <el-input v-model.trim="param.agentName" clearable placeholder="请输入客户名称"></el-input>
                </el-form-item>
                <el-form-item label="堆场名称">
                  <el-input v-model.trim="param.yardName" clearable placeholder="请输入堆场名称"></el-input>
                </el-form-item>
                <el-form-item label="箱源">
                  <el-select v-model="param.containerClassify" clearable style="width:100%" placeholder="选择箱源">
                    <el-option label="自有箱" value="5"/>
                    <el-option label="代管箱" value="10"/>
                    <el-option label="外调箱" value="15"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="箱东公司">
                  <el-input v-model.trim="param.outBoxCompanyName" clearable  placeholder="请输入集装箱公司名称"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                  <el-input v-model.trim="param.agentUserName" clearable placeholder="请输入联系人名称"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="2">
                <el-row>
                  <el-col :span="24"><el-button @click="handleReSet" :icon="Refresh">重置</el-button></el-col>
                  <el-col :span="24" class="marginTop17"><el-button @click="getTableData" :icon="Search" type="primary">查询</el-button></el-col>
                </el-row>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
    <cz-tages :bottomLine="true" :typeList="typeList" @handleTypeChange="handleTypeChange" style="float: left;"></cz-tages>
    <span style="margin-top: -28px;float: right;">
      <el-dropdown placement="top" :hide-on-click="false" class="floatLeft" style="margin-right: 12px;">
        <el-button :icon="Grid" type="primary" size="small">自定义显示列</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <div class="mt-2" style="min-width: 600px;">
                <el-checkbox-group v-model="showTableItem" @change="handleGroupChange" :min="5" class="checkbox-grid">
                  <el-row style="width: 100%;">
                      <el-col :span="4" v-for="(item,index) in table.header"  :key="index">
                        <el-checkbox  :label="item.title" :value="item.key" size="small" />
                      </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button type="primary" @click="goCreateReturn(5)" size="small" plain class="floatLeft">开还箱单</el-button>
      <el-button type="primary" @click="goCreateReturn(15)" size="small" plain class="floatLeft">开还箱令</el-button>
      <el-button type="primary" @click="goCreateReturn(10)" size="small" plain class="floatLeft">开箱属</el-button>
      <!-- <el-tooltip effect="dark" content="此按钮可选择当前页及后续页所有集装箱" placement="left">
        <template v-if="isSelectAll">
          <el-button :icon="Finished" size="small" @click="slectAll" plain class="operatingArea">全选</el-button>
        </template>
        <template v-else>
            <el-button size="small" @click="deselectAll" plain class="operatingArea">取消全选</el-button>
        </template>
      </el-tooltip> -->
      <!-- <el-button type="primary" size="small" @click="" plain>导出</el-button> -->
    </span>
    <Table ref="tableRef" v-bind="table" :allId="allId" :isAllCheck="isAllCheck" style="width: 100%;" @deleteItem="deleteItem"
           @pageChange="onTablePageChange" @activDelete="activDelete" @activEdit="activEdit"  @downloadBoxPhoto="downloadBoxPhoto" @hxView="hxView"
           @showInfo="showInfo" @jumpTo="jumpTo" @updateSelectAll="updateSelectAll" :disableHeaderCheckbox="disableHeaderCheckbox">
    </Table>

    <!-- info提箱记录详情 -->
    <el-drawer v-model="param.drawer" title="I am the title" :with-header="false">
      <span class="_before" v-if="typeDrawer==1">提箱记录详情</span>
      <span class="_before" v-else-if="typeDrawer==2">提箱记录编辑</span>
      <el-row class="marginTop20">
        <el-col :span="6" class="text-right">提箱单号：</el-col>
        <el-col :span="16">{{ drawerData.packingNo }}</el-col>
      </el-row>
      <el-row class="marginTop20" v-if="typeDrawer==2">
        <el-col :span="6" class="text-right">成本价：</el-col>
        <el-col :span="16">
           <div class="input-sel" style="display: flex;">
                  <el-select v-model="drawerData.rentInCurrency" style="width: 60px" placeholder="请选择">
                          <el-option
                              v-for="item in feeCurrencyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                          />
                        </el-select>
                  <el-input :formatter="formatterNumberKo" :parser="formatterNumberKo" v-model="drawerData.rentInPrice" style="width: 130px" placeholder="请输入成本价" maxlength="20" />
                </div>
        </el-col>
      </el-row>
      <el-row class="marginTop10" v-if="typeDrawer==1">
        <el-col :span="6" class="text-right">成本价：</el-col>
        <el-col :span="16">{{ drawerData.rentInCurrency == 'USD'?'$':'¥' }} {{ drawerData.rentInPrice }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">堆场名称：</el-col>
        <el-col :span="16">{{ drawerData.yardName }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">箱型：</el-col>
        <el-col :span="16">{{ formatBoxType(drawerData.boxType) }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">箱况：</el-col>
        <el-col :span="16">{{ formatBoxCondition(drawerData.boxCondition) }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">车牌号：</el-col>
        <el-col :span="16">{{ drawerData.plateNumber }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">箱号：</el-col>
        <el-col :span="16">{{ drawerData.containerNo }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">提箱日期：</el-col>
        <el-col :span="16">{{ formatDate(drawerData.packingDate, 4) }}</el-col>
      </el-row>
      <el-row class="marginTop10">
        <el-col :span="6" class="text-right">提箱附件：</el-col>
        <el-col :span="16">
          <showFile :detailFileList="drawerData.detailFileList"></showFile>
        </el-col>
      </el-row>
       <template #footer v-if="typeDrawer==2">
            <div class="dialog-footer" style="display: flex; justify-content: center;">
               <!-- <el-button :icon="Refresh" @click="formReset()">重置</el-button> -->
               <el-button type="primary" @click="detaiClick">确定</el-button>
            </div>
         </template>
    </el-drawer>
    <!-- warning删除提示-->
    <el-dialog v-model="param.dialogVisible" title="系统提示" width="500">
      <span>确认删除？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="param.dialogVisible = false">取消</el-button>
          <el-button @click="param.dialogVisible = false">是的</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 开还箱单 -->
    <!-- <el-drawer v-model="param.openReturnList" :with-header="false" :before-close="close" :show-close="false" size="40%">
        <el-row>
            <el-col :span="6">
                <span class="_before" v-if="param.oprType == 5">开还箱单</span>
                <span class="_before" v-else-if="param.oprType == 10">开箱属</span>
                <span class="_before" v-else-if="param.oprType == 15">开还箱令</span>
            </el-col>
        </el-row>
        <el-row class="marginTop10">
          <el-col :span="4" class="_asterisk">箱号</el-col><el-col :span="12" :offset="8" class="text-right"><el-button @click="choiceBox" size="small" icon="edit">选择箱号</el-button></el-col>
          <el-col :offset="1" :span="23" class="marginTop10">
            <el-row>
              <template v-if="selectBoxList && selectBoxList.length > 0">
                  <el-col v-for="(item,index) in selectBoxList" :span="6" :key="index" class="containerNo-border">{{item.containerNo}}</el-col>
              </template>
              <template v-else>
                <el-col :span="24" class="text-center" style="color: #2158F3;">请先选择箱号</el-col> 
              </template>
            </el-row>
          </el-col>
        </el-row>
        <el-form :model="param" ref="returnFormRef" label-width="auto" :rules="returnRules" class="marginTop20">
          <el-form-item label="箱型/箱量">{{param.boxTypeNum}}</el-form-item>
          <el-form-item label="还箱城市">{{returnCityStr}}</el-form-item>
          <el-form-item label="堆场名称"  prop="yardName_">
            <yardSelect ref="selectRef" v-model="param.yardName_" :yardName="param.yardName_"  :selectName="'yardName'" :needInfo="true" @yardId="yardInfoData"
              style="width:100%" :placeholder="'请输入堆场名称'">
            </yardSelect>
          </el-form-item>
          <el-form-item label="堆场地址" prop="yardAddress">
            <el-input v-model="yardInfo.yardAddress" disabled style="width: 100%;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="堆场作业时间" prop="workTime"> 
            <el-input v-model="yardInfo.workTime" disabled style="width:100%" placeholder="请输入" />
          </el-form-item>

          <template v-if="param.oprType == 5">
            <el-form-item label="还箱指令号" prop="instruction">
              <el-input v-model="param.instruction" style="width: 100%;" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="还箱单有效期范围" prop="returnValidityPeriod">
              <el-date-picker v-model="param.returnValidityPeriod" type="daterange" range-separator="~"
                start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" />
            </el-form-item>
          </template>
          <template v-if="param.oprType == 15">
            <el-form-item label="还箱指令号">
              <el-input v-model="param.instruction" style="width: 100%;" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="还箱单有效期范围">
              <el-date-picker v-model="param.returnValidityPeriod" type="daterange" range-separator="~"
                start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" />
            </el-form-item>
          </template>
          <template v-if="param.oprType != 10">
            <el-form-item label="联系人" prop="contacts">
              <el-select v-model="yardInfo.contacts" @change="handleYardContactsChange">
                <el-option v-for="item in yardInfo.yardContacts" :key="item.yardContactSerialNo" :label="item.contacts"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话" prop="tel">
              <el-input v-model="yardInfo.tel" disabled style="width: 100%;" placeholder="请输入">
                <template #prepend v-if="yardInfo?.areaCode">+{{yardInfo.areaCode}}</template>
              </el-input>
            </el-form-item>
          </template>
          
          
          <el-form-item v-if="param.oprType == 10" label="箱属内容" prop="boxOwnerContent">
              <el-input v-model="param.boxOwnerContent" type="textarea" maxlength="2000" show-word-limit  rows="5" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item v-if="param.oprType != 10" label="箱令内容" prop="boxOwnerContent">
              <el-input v-model="param.boxOwnerContent" type="textarea" maxlength="2000" show-word-limit  rows="5" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item :label="returnTypeFilter(param.oprType)+'附件'">
              <ImgUpload ref="packingRef" :urlList="fileList" :limit="10" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :drag="true" :showNumber="4"></ImgUpload>
          </el-form-item>
        </el-form>    
        <div style="margin-top: 40px;height: 50px;">
          <el-button @click="handleSubmit" type="primary" style="float: right;width: 100px;">提交</el-button>
        </div>
    </el-drawer> -->
    <!-- 查看申请 -->
    <el-drawer v-model="hxApplyDialog" :with-header="false" size="40%">
        <span class="_before">还箱申请</span>
        <el-row class="marginTop20">
            <el-col :span="24">类型：
                <span>{{{5:'还箱单',10:'箱属',15:'还箱令',null:'无数据'}[txjlInfo.returnBoxType]}}</span>
            </el-col>
        </el-row>
        <el-row class="marginTop20">
            <el-col :span="8">箱号：{{txjlInfo.containerNo}}</el-col>
            <el-col :span="16" class="text-ellipsis">还箱地：
                <template v-if="txjlInfo.returnCity">
                    <el-tooltip effect="dark" :content="splitSrray(txjlInfo.returnCity)" placement="top">{{splitSrray(txjlInfo.returnCity)}}</el-tooltip>
                </template>
                <template v-else>--</template>
            </el-col>
        </el-row>
        <el-row class="marginTop20" v-if="txjlInfo.returnBoxType == 10">
            <el-col :span="3">提箱照片：</el-col>
            <el-col :span="24" class="marginTop5">
              <ImgUpload ref="packingRef5" :urlList="JSON.parse(txjlInfo.detailFileList || '[]')" :hideUpload="true" :displayType="0" :fileSize="5" :showNumber="6" :type="'jpg/png/jpeg/pdf/zip'" :limit="10" :drag="true"></ImgUpload>
            </el-col>
        </el-row>
        <el-row class="marginTop20" align="center" v-if="txjlInfo.returnBoxType == 15">
            <el-col :span="5" class="_asterisk">预计还箱日期：</el-col>
            <el-col :span="10">{{txjlInfo.planReturnDate}}</el-col>
        </el-row>
        <el-row class="marginTop20 _asterisk" v-if="txjlInfo.returnBoxType == 15">
            <el-col :span="3">到站运单：</el-col>
            <el-col :span="24" class="marginTop5">
               <ImgUpload ref="packingRef6" :urlList="JSON.parse(txjlInfo.arrivalWaybill || '[]')" :hideUpload="true" :displayType="0" :fileSize="5" :showNumber="6" :type="'jpg/png/jpeg/pdf/zip'" :limit="10" :drag="true"></ImgUpload>  
            </el-col>
        </el-row>
        <el-row class="marginTop20" v-if="txjlInfo.returnBoxType == 15">
            <el-col :span="3">转关单：</el-col>
            <el-col :span="24" class="marginTop5">
              <ImgUpload ref="packingRef7" :urlList="JSON.parse(txjlInfo.turnCustomBill || '[]')" :hideUpload="true" :displayType="0" :fileSize="5" :showNumber="6" :type="'jpg/png/jpeg/pdf/zip'" :limit="10" :drag="true"></ImgUpload>  
            </el-col>
        </el-row>
   </el-drawer>
  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table'
import ImgUpload from '@/components/upload/uploadFiles-Images'
import basicTools from '@/tools/index'
import czTages from '@/components/chengzhiTags' 
import {getDetailTable,getBoxEastDetailTable,getPackingDetailData,addPackingDetail,deletePackingDetail,details,boxEastStatusCount} from '@/api/orderManage/packingDetail'
import {computed, onMounted, onActivated, reactive, ref, watch, nextTick} from 'vue';
import {formatDate, formatBoxType, formatBoxCondition,formatterNumberKo} from '@/utils'
import {Grid,Plus,Delete,Edit,Message,Search,Download,ZoomIn,Upload,Refresh,UploadFilled} from '@element-plus/icons-vue'
import {ElMessage,ElMessageBox} from 'element-plus'
import showFile from '@/components/upload/showFile.vue'
import { addReturn } from '@/api/orderManage/returnBox'
import MultipleBoxNumbersDialog from '@/components/dialog/multipleBoxNumbersDialog.vue'
import {formatContainerNo} from '@/utils/mlpBox' // 格式化箱号
import {useRoute,useRouter} from 'vue-router'
const activeNames = ref(['0'])
const showTableItem = ref<string[]>([])
const route = useRoute();
const handleGroupChange = () => {
  sessionStorage.setItem(String(route.name), JSON.stringify(showTableItem.value));
  table.header.forEach(item => {
    item.isCheck = showTableItem.value.includes(item.key)
  })
}
onMounted(() => {
  const showTableItemStr = sessionStorage.getItem(String(route.name))
  if(sessionStorage.getItem(String(route.name))?.length && showTableItemStr){
    showTableItem.value =  JSON.parse(showTableItemStr)
  }else{
    table.header.forEach(item=>{
      showTableItem.value.push(item.key)
    })
  }
  handleGroupChange()
})
const param = reactive({
  value1: [],
  boxInfo: {code: '123456789', type: "40HQ", info: "无"},
  pageNum: 0,
  pageSize: 10,
  dialogTableVisible: false,
  drawer: false,
  dialogEditVisible: false,
  dialogVisible: false,
  dialogPathVisible: false,
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    {value: '5', label: '40HQ',},
    {value: '10', label: '40GP',},
    {value: '15', label: '20HQ',},
    {value: '20', label: '20GP',},
  ],
  boxCaseOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    {value: '15', label: '适货',},
    {value: '10', label: '次新',},
    //{ value: '20', label: '混提(次新或者适货)', },
    {value: '5', label: '全新',},
  ],
  outBoxCompanyName:"",
  agentUserName:"",
  oprType: 5,
});
const feeCurrencyList=ref([
  {
    value:'CNY',
    label:'¥'
  },
  {
    value:'USD',
    label:'$'
  },
])
const table = reactive({
  // 列表数据（必传）
  data: [],
  // 表头内容（必传，注意格式）
  header: [
    {key: 'containerNo', colWidth: '140', title: '箱号', type: '<a>',fixed:"left", command: 'showInfo', isCheck: true},
    {
      key: 'boxType',
      colWidth: '70',
      title: '箱型',
      type: 'filter',
      fixed:"left", 
      filter: {5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP'},
      isCheck: true
    },
    {
      key: 'boxCondition',
      colWidth: '70',
      title: '箱况',
      type: 'filter',
      fixed:"left", 
      filter: {5: '全新', 10: '次新', 15: '适货'},
      isCheck: true
    },
    { key: 'packingDate', colWidth: '120', title: '提箱日期', fixed:"left",  type: 'date', isCheck: true},
    { key: 'rentInPrice', colWidth: '120', title: '成本价', type: 'add', before: '￥',currency:"rentInCurrency", isCheck: true },
    { key: 'rentOutPrice', colWidth: '120', title: '租出价', type: 'add', before: '￥',currency:"rentOutCurrency", isCheck: true },
    { key: 'outBoxCompanyName', colWidth: '200', title: '集装箱公司', type: 'text', isCheck: true },
    { key: 'returnBoxType', title: '还箱类型', type: 'filter',filter: { 5:'还箱单', 10:'箱属', 15:'还箱令',null:'--'}, isCheck: true },
    { key: 'agentUserName', colWidth: '100', title: '联系人', type: 'text', isCheck: true },
    { key: 'yardName', title: '堆场名称', colWidth: '120', type: 'text', isCheck: true},
    { key: 'orderNo', colWidth: '190', title: '订单号', type: '<a>' ,command: 'jumpTo',parameter:'orderNo', isCheck: true},
    { key: 'packingNo', colWidth: '190', title: '提箱单号', type: '<a>',command: 'jumpTo',parameter:'packingNo', isCheck: true},
    { key: 'agentName',colWidth: '200', title: '客户', type: 'text', isCheck: true},
    
    {
      key: 'operate',
      title: '操作',
      colWidth: '150',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          command: 'deleteItem',
          name: '删除'
        },
        {
          command: 'activEdit',
          name: '编辑', 
        },
        {
          command: 'hxView',
          name: '查看申请',
          isShow: (row: any) => {
             return row.returnStatus  >= 12
          },
        }, 
        {
          command: 'downloadBoxPhoto',
          name: '下载箱照'
        },
      ],
    },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  },
});

const typeList =ref([
    { id: 0, name: '全部',num:0 },
    { id: 10, name: '未还',num:0 },
    { id: 12, name: '待还',num:0 },
    { id: 15, name: '还箱中',num:0 },
    { id: 20, name: '已还箱',num:0 },
])
// 查询各箱源状态的数量
const getBoxEastStatusCount = async(data:any) => { 
  await boxEastStatusCount(data).then((res: any) => {
    if(res.code == '00000'){
      typeList.value.forEach(item => { 
        item.num = 0
        res.data.forEach(item1 => { 
          if(item.id == 0){ //全部
            item.num += item1.totalQty
          }else if(item.id == 10 && item1.status == 10){ //未还
              item.num += item1.totalQty
          }else if(item.id == 12 && item1.status == 12){ //已申请
              item.num += item1.totalQty
          }else if(item.id == 15 && item1.status == 15){ //还箱中
              item.num += item1.totalQty
          }else if(item.id == 20 && item1.status == 20){ //已还箱
              item.num += item1.totalQty
          }
        })
      })
    }
  })
}
// 去开还箱单(//param.oprType 5-还箱单 10-箱属 15-还箱令  )
const goCreateReturn = (type: number) => {
  param.oprType = type
  param.drawer1 = true
  // param.rentBoxTable = []
}
const orderTypeval = ref("")
onActivated(() => {
  if(route.query.refNo){
    param.containerNo=route.query.refNo
  }
  nextTick(() => {
    if (route.name == 'JKreleaseInfoXD5') {
      orderTypeval.value = "10"
    } else {
      orderTypeval.value = "5"
    }
    getTableData()
  })

})


/*集装箱公司 查询提箱记录分页列表
* @param {Long} packingId 提箱单Id
* @param {String} packingNo 提箱单号
* @param {Integer} boxType 集装箱箱型 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
* @param {Integer} containerNo 集装箱箱号
* @param {Integer} boxCondition 集装箱箱况 5-全新   10-次新  15-适货
* @param {LocalDateTime} beginPackingDate  endPackingDate 提箱日期时间区间   
*/
const returnStatus = ref(null) // 还箱状态 10-未还 12-已申请 15-还箱中 20-已还箱
const getTableData = () => {
  const {container, containerList} = formatContainerNo(param.containerNo);
  let data = {
    containerNo: container, // 单箱号查询
    containerNos: containerList, // 多箱号查询
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    orderType: orderTypeval.value,
    packingNo: param.packingNo,
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    agentName: param.agentName,
    yardName: param.yardName,
    containerClassify: param.containerClassify,
    outBoxCompanyName: param.outBoxCompanyName,
    agentUserName: param.agentUserName,
    returnStatus: returnStatus.value
  }
  if (param.packingDate) {
    console.log(param.packingDate)
    data.beginPackingDate = param.packingDate[0]
    data.endPackingDate = param.packingDate[1]
  }
  getBoxEastStatusCount(data)
  getBoxEastDetailTable(data).then((res: any) => {
    table.data = res.data.list;
    table.config.total = res.data.total;
    
  })
}
function handleTypeChange(val: any) {
  // console.log(val)
  // param.statusType = val
  // param.containerClassify = val
  returnStatus.value = val
  getTableData()
  deselectAll()
}

function handleReSet() {
  param.containerNo = null
  param.packingNo = null
  param.boxType = null
  param.boxCondition = null
  param.agentName = null
  param.yardName = null
  param.containerClassify = null
  param.packingDate = null
  param.outBoxCompanyName = ""
  param.agentUserName = ""
  getTableData()
}

//删除  
const activDelete = (row: any) => {
  // data.value.activityId = row.activityId;
  // data.value.handleOperate = 'edit';
  param.dialogVisible = true;
};
const tableRef = ref({});
const handleDelete = () => {
  console.log(tableRef.value.multipleSelection)
  const selection = tableRef.value.multipleSelection
  if (selection.length == 0) {
    return
  }
  selection.forEach(async (item: any) => {
    await deletePackingDetail(item.id)
  })
  getTableData();

};


const drawerData = ref({})
const typeDrawer=ref(1) //1详情 2编辑
//详情
const showInfo = (row: any) => {
  typeDrawer.value=1
  showInfoDeta(row)
};
const router = useRouter();
const jumpTo = (row: any,type:any = '') =>{
  if(type == "packingNo"){ //跳转到提箱单页面
    router.push({
      path: '/tiXiangManage/tiXiangManageXD',
      // query: {
      //   boxId: row.releaseRentId,
      //   boxType: row.boxType,
      //   boxCondition: row.boxCondition,
      //   returnCityId: row.returnCityId
      // }
    });
  }else if(type == "orderNo"){ //跳转到订单页面
    router.push({
      path: '/orderManage/rentOrder',
      // query: {
      //   boxId: row.releaseRentId,
      //   boxType: row.boxType,
      //   boxCondition: row.boxCondition,
      //   returnCityId: row.returnCityId
      // }
    });
  }
}
//编辑
const activEdit = (row: any) => {
  typeDrawer.value=2
  showInfoDeta(row)
};
const showInfoDeta=(row)=>{
  getPackingDetailData(row.id).then((res: any) => {
    if (res.code == "00000") {
      drawerData.value = res.data
      // if(typeDrawer.value==2){
      //   drawerData.value.detailFileList=JSON.parse(res.data.detailFileList) 
      //   // packingRef.value=JSON.parse(res.data.detailFileList) 
      // }
      param.drawer = true;
    } else {
      ElMessage.error(res.msg)
    }
  }).catch((err) => {
    console.log("ERROR:", err.msg)
  })
}
//编辑
const detaiClick=()=>{
  let data={
    id:drawerData.value.id,
    rentInPrice:drawerData.value.rentInPrice,
    rentInCurrency:drawerData.value.rentInCurrency,
  }
   details(data).then((res: any) => {
    if (res.code == "00000") {
      param.drawer = false;
      getTableData()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
//分页
function onTablePageChange(page: any) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  getTableData();
};


const isSelectAll = ref(true) // true:显示全选按钮  false：显示取消全选按钮
const allId = ref([]) // 使用全选功能时使用
const disableHeaderCheckbox = ref(false) // true:禁用表头全选/全取消 选择框 false:开启 表头全选/全取消 选择框
const isAllCheck = ref(false) //是否使用全选功能
const checkAll = ref([]) //点击全选按钮时 选中列表所有内容（包含当前页和所有后续页）
const slectAll = async (val: any) => {
  checkAll.value = []
  await getBoxEastDetailTable({pageNum: 1, pageSize: 10000}).then(res => {
    if (res.code == "00000" && res.data.list && res.data.total) {
      isSelectAll.value = false
      disableHeaderCheckbox.value = true
      res.data.list.forEach(item => {
        checkAll.value.push(item)
      })
      isAllCheck.value = true
      allId.value = checkAll.value
      tableRef.value.checkAll()
    } else {
      ElMessage.error("全选失败，请刷新页面，或者手动选择")
    }
  })
}
const deselectAll = () => {
  allId.value = []
  disableHeaderCheckbox.value = false
  tableRef.value.clearCheckAll()
  isSelectAll.value = true
}

const updateSelectAll = (val) => {
  allId.value = val
}

// 删除
const deleteItem =(row: any) => { 
  ElMessageBox.confirm('确定要删除此纪录么？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deletePackingDetail([row.id]).then((res: any) => { 
      if(res.code != '00000'){
        ElMessage.warning(res.msg)
      }else{
        getTableData()
        ElMessage.success('删除成功！')
      }
    })
  }).catch(() => { });
}

// 查看还箱记录
const hxApplyDialog = ref(false)
const txjlInfo = ref({})
const hxView = (row:any) => {
  txjlInfo.value = row
  hxApplyDialog.value = true
}
// 下载箱照
const downloadBoxPhoto = (row:any) => {
  basicTools.batchDownloadFile(row.detailFileList,row.containerNo)
}
// 多个城市拼接
const splitSrray = (row:any) => {
  let newRow = []
  try{
    newRow = JSON.parse(row)
  }catch(e){
    newRow = []
  }
  let newRowStr = ''
  const newRowLength = newRow.length
  newRow.forEach((item,index) => { 
    if(index < newRowLength - 1){
      newRowStr += item.returnCityName + "、"
    }else{
      newRowStr += item.returnCityName
    } 
  })
  return newRowStr || '--'
}
</script>

<style lang="scss" scoped>
.el-form-diy {
  padding: 10px;

  div {
    width: 100%;
  }
}

.upload-img {
  :deep(.el-upload--picture-card) {
    display: none !important
  }
}
// 为折叠面板图标添加样式
:deep(.el-collapse-item__header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-ele {
  flex-shrink: 0;
  padding-right: 15px;
}
</style>